<template>
  <el-dialog :visible.sync="visible" :title="title" width="700px" :close-on-click-modal="false">
    <VForm :fieldList="fieldList" label-width="90px" ref="form" v-model="formData">
      <template #date>
        <el-date-picker v-model="formData.date" type="datetime" placeholder="选择日期时间"> </el-date-picker>
      </template>
    </VForm>

    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="$wait.is('account.role.*Role')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VForm from '@/components/VForm';
import request from '../../../api/http';

export default {
  components: {
    VForm,
  },
  data() {
    return {
      visible: false,
      type: 'add',
      formData: {},

      fieldList: [
        {
          type: 'select',
          label: '产品',
          model: 'materiel_id',
          props: {
            options: this.getMateriel(),
            placeholder: '请选择产品',
          },
          rules: [
            {
              required: true,
              message: '请选择产品',
            },
          ],
        },
        // {
        //   type: 'input',
        //   label: '当前记录问题',
        //   model: 'task_patch_id',
        //   props: {
        //     placeholder: '请输入当前记录问题',
        //     disabled:true
        //   },
        //   rules: [
        //     {
        //       required: true,
        //       message: '请输入当前记录问题',
        //     },
        //   ],
        // },
        {
          type: 'input',
          label: '质量问题内容',
          model: 'content',
          props: {
            placeholder: '请输入质量问题内容',
            type: 'textarea',
          },
          rules: [
            {
              required: true,
              message: '请输入质量问题内容',
            },
          ],
        },
        {
          type: 'date',
          label: '质量问题出现的日期',
          model: 'date',
          slotName: 'date',
          props: {
            placeholder: '质量问题出现的日期',
            valueFormat: 'timestamp',
            type: 'datetime',
          },
          rules: [
            {
              required: true,
              message: '质量问题出现的日期',
            },
          ],
        },
        // {
        //   type: 'input',
        //   label: '工序号',
        //   model: 'process_no',
        //   props: {
        //     placeholder: '请输入工序号',
        //   },
        //   rules: [
        //     {
        //       required: true,
        //       message: '请输入工序号',
        //     },
        //   ],
        // },
        // {
        //   type: 'input',
        //   label: '基础工艺号',
        //   model: 'standard_num',
        //   props: {
        //     placeholder: '请输入基础工艺号',
        //   },
        //   rules: [
        //     {
        //       required: true,
        //       message: '请输入基础工艺号',
        //     },
        //   ],
        // },
      ],
    };
  },

  computed: {
    title() {
      const { type } = this;
      return `${type === 'edit' ? '编辑' : '新增'}`;
    },
  },

  methods: {
    getMateriel() {
      const arr = [];
      request.get(`/materiel/api/list?page=1&pageSize=10000`).then(res => {
        res.data.data.forEach(item => {
          arr.push({
            label: item.num,
            value: item.id,
          });
        });
      });
      return arr;
    },
    show(type = 'add', model) {
      this.visible = true;

      this.type = type;

      this.$nextTick(() => {
        this.reset();
        this.formData = {
          ...model,
        };
      });
    },

    close() {
      this.visible = false;
    },

    reset() {
      this.formData = {};
      this.$refs.form && this.$refs.form.resetFields();
    },

    async handleSubmit() {
      const { type } = this;
      const params = await this.$refs.form.submit();
      await this.$api.al_productionProcess[`${type}`](params);
      this.$message.success('保存成功！');
      this.close();

      this.$emit('submit');
    },
  },
};
</script>

<style lang="scss" scoped></style>
